<!--HAP's src/main/resources/rawfile/test.html-->
<!DOCTYPE html>
<html charset="UTF-8" xmlns="http://www.w3.org/1999/html">
<head>
    <title>同层渲染测试html</title>
    <meta name="viewport" http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        * {
          box-sizing: border-box;
         }

         html {
           height: 100%;
           font-size: 14px;
         }
         body {
           height: 100%;
           /*min-width: 1240px;*/
           font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif;
           margin: 0;
           padding: 0;
         }

        input[type="checkbox"]{
            appearance:none;
            width:380px;
            height:38px;
            border:1px solid #aaaaaa;
            border-radius:50%;

        }
        /*复选框选择后的样式*/
        input[type="checkbox"]:checked {
            background-image:url('../img/checked.png');
            background-repeat:no-repeat;/*取消背景图片平铺*/
            background-size:32px 32px;/*背景图片大小,第一个27px表示width宽度,第二个27px表示height高度*/
            background-position: center;/*背景图居中对齐*/
            background-color: #cd2424;
        }
        @media screen and (min-device-width: 360px) {
            .otherLogin {
                width: 100%; height: 100px;border-radius: 100px;background-color: #e0dddd;font-size: 24px;
                font-weight: 500;margin-top: 20px;border:none
            }
            .accountBind {
                font-size: 20px;color: gray;margin-top: 4px;justify-content: center;width: 100%;text-align: center
            }
            .privacyBox {
                width:90%;height:400px;background-color: #FFFFFF;opacity: 1;border-radius: 30px;justify-content:center;
                align-items: center;display: flex;flex-direction:column;
            }
        }
        @media screen and (max-device-width: 360px) {
            .otherLogin {
                width: 100%; height: 100px;border-radius: 100px;background-color: #e0dddd;font-size: 48px;
                font-weight: 500;margin-top: 20px;border:none
            }
            .accountBind {
                font-size: 24px;color: gray;margin-top: 4px;justify-content: center;width: 100%;text-align: center
            }
            .privacyBox {
                width:90%;height:450px;background-color: #FFFFFF;opacity: 1;border-radius: 50px;justify-content:center;
                align-items: center;display: flex;flex-direction:column;margin-bottom: 30px;
            }
        }



    </style>
</head>
<body>
<div id="template" style="width:100%;height:100%;z-index: 0;position: absolute;text-align: center;margin:auto;display: none;align-items: center;justify-content: center;background-color: #b2b1b19e">
    <div class="privacyBox">
        <div style="width: 100%;flex-direction:column;justify-content:space-between;display: flex;align-items: center;flex: 3">
            <div style="flex: 1;padding-top: 10px;">
                <span style="font-size: 44px;font-weight: 700;color: black">用户隐私与协议条款</span>
            </div>
            <div style="flex: 1;width: 80%">
                <span style="font-size: 32px;color: black;font-weight: 400;"> 已阅读并同意 </span>
                <span style="font-size: 32px;color: red;font-weight: 600;">《购物用户协议》《购物隐私政策》 </span>
                <span style="font-size: 32px;font-weight: 400">和</span>
                <a onclick="previewPrivacy()" href=""><span style="font-size: 32px;font-weight: 600;color: red">《华为账号用户认证协议》</span></a>
            </div>
            <div style="flex: 1;display: flex;justify-content: center;align-items: center;flex-direction:row;width: 100%">
                <div style="width: 45%;border-radius: 36px;padding: 8px;">
                    <button onclick="offVisible()" style="width: 100%;border-radius: 36px;padding: 8px;height: 100px;border: none;background-color: #FFFFFF;font-size: 32px">取消</button>
                </div>
                <div style="width: 45%;border-radius: 24px;padding: 8px">
                    <button onclick="agreeLogin()" style="background-color: #CE0E2D;border-radius: 32px;width: 100%;font-size: 32px;color: #FFFFFF;border: none;height: 100px;">同意并登录</button>
                </div>
            </div>
        </div>
    </div>

</div>

<div style="width:100%;height:100%;background:white;display:flex;flex-direction:column;justify-content:space-between;z-index: 2;opacity: 1;position: absolute;" id="mainPage">

    <div style="width:100%;flex:1;display: flex;flex-direction:column;justify-content:flex-end;align-items: center">

        <div style="flex: 1;justify-content:center"></div>
        <div style="flex: 1;align-items: center"></div>
        <div style="flex: 1;align-items: center">
            <img src="../img/appmarket.png" style="height: 120px;width: 120px">
        </div>
    </div>

    <div style="width:100%;flex:1;display: flex;justify-content:space-between;flex-direction:column;">
        <div style="flex: 1;">
            <p style="font-weight: bold;font-size: 80px;color: black;width: 100%;justify-content: center;text-align: center;margin-bottom: 5px;margin-top: 5px" id="Anonymous">

            </p>
            <p class="accountBind">
                华为账号绑定号码
            </p>
        </div>
        <div id="bodyId" style="width:90%;height:100%;flex:1;display: flex;flex-direction:column;margin-left: 5%;margin-right: 5%">

            <embed id="nativeLogin" type="native/login" style="width: 100%; height: 100px;z-index: 1"/>
            <button class="otherLogin" id="otherLogin">其他登录方式</button>
        </div>
    </div>

    <div style="width:100%;flex:1;justify-content:flex-end;display: flex;flex-direction: column;padding-bottom: 40px;background-color: white">

        <div style="padding-bottom: 60px;margin-left: 5%;margin-right: 5%">
            <input type="checkbox" id="checkbox" name="pravicy" value="allow" style="appearance:none;width:30px;height:30px;border:1px solid #aaaaaa;border-radius:50%;" onclick="agreePrivacy()">
            <span style="font-size: 36px;color: gray;font-weight: 300"> 已阅读并同意 </span>
            <<span style="font-size: 36px;color: black;font-weight: 500;">《购物用户协议》《购物隐私政策》 </span>
            <span style="font-size: 36px;font-weight: 300;color: gray" onclick="previewPrivacy()">和</span>
            <a onclick="previewPrivacy()" href=""><span style="font-size: 36px;font-weight: 500;color: black">《华为账号用户认证协议》</span></a>
        </div>
<!--        <span class="output" style="word-break:normal;width:auto;display:block;white-space:pre-wrap;overflow: hidden ">111</span>-->
    </div>


</div>



</body>


<script>

    // 初始化数据通道
    var h5Port;
    var privacyIsAgree = false;
    window.addEventListener('message', function (event){
        if (event.data === '__init_port__') {
            h5Port = event.ports.at(0); // 1. 保存从应用侧发送过来的端口。
            if (h5Port != null) {
                console.log("hwd In html got message");
                h5Port.onmessage = function (event) {
                    console.log("hwd In html got message");
                    // 2. 接收应用侧发送过来的消息.
                    var result = event.data;
                    console.log("html receive " + result)
                    if (result.startsWith("Anonymous:")) {
                        // 写入匿名手机号
                        document.getElementById("Anonymous").innerHTML = result.slice(10)
                    } else if (result.startsWith("Privacy:")) {
                        // 未同意隐私协议，展示协议模态框
                        let message = result.slice(9)
                        if (message !== "") {
                            console.log("receive message " + message)
                            onVisible()
                        }
                    }
                    else {
                        // 登录成功后跳转到新页面
                        loginSuccess(result);
                    }

                }
                h5Port.onmessageerror = (event) => {
                    console.error(`hwd In html Error receiving message: ${event}`);
                };
            }
        }
    })

    // 3. 使用h5Port向应用侧发送消息。
    function PostMsgToEts(data) {
        if (h5Port) {
            h5Port.postMessage(data);
        } else {
            console.error('h5Port is null, Please initialize first');
        }
    }

    // 根据元素id来控制模态框的展示
    function onVisible() {
        var model = document.getElementById("template");
        var loginPage = document.getElementById("mainPage");
        model.style.zIndex = 3;
        model.style.display = "flex";
        loginPage.style.opacity = 0.6;
    }

    function offVisible() {
        var model = document.getElementById("template");
        var loginPage = document.getElementById("mainPage");
        model.style.zIndex = 0;
        model.style.display = "none";
        loginPage.style.opacity = 1;
    }

    // 同意协议后需回传消息到native侧，然后native侧触发一键登录
    function agreeLogin() {
        PostMsgToEts("agreeLogin");
        var checkbox = document.getElementById("checkbox");
        checkbox.checked = true;
        offVisible()
    }

    // 发送消息到native侧，查看隐私协议
    function previewPrivacy(){
        PostMsgToEts("openPrivacy");
    }

    // 勾选复选框的协议后，需要发送消息到native侧，native侧便会修改协议为同意状态
    function agreePrivacy() {
        var checkBox = document.getElementById("checkbox")
        if (checkBox.checked && !privacyIsAgree) {
            console.log("22222")
            PostMsgToEts("agreePrivacy");
            privacyIsAgree = true;
        }
    }

    // 登录成功后将数据展示到另外的页面
    function loginSuccess(params) {
        console.log("succccccccc")
        window.location.href = "./success.html?para=" + params
    }


</script>



</html>
